<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转账</title>
    <script src="../../static/js/jquery-1.11.0.js"></script>
    <style>


        #d1 {
            width: 480px;
            height: 620px;
            position: absolute;
            margin-top: 20px;
            right: 500px;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 16px;
            text-align: center;
        }

        #d2 {
            position: relative;
            left: 10px;
            top: 70px;
        }

        #h1 {
            position: relative;
            left: 4px;
            top: 50px;
        }

        .i {
            width: 300px;
            height: 30px;
        }

        #code {
            width: 100px;
            height: 30px;

        }

        #d3 {

            position: relative;
            left: 10px;
            top: 70px;
        }
        #mySelect{
            width: 300px;
            height: 34px;
        }


    </style>
    <script>

        $(function () {
            //切换验证码
            $("#code_img").click(function (){
                $("#code_img").attr("src","http://localhost:8080/kaptcha.jpg")
            })
            //银行卡输入框失去焦点事件
            $("#c_id").blur(function () {
                // console.log(1);
                //调用find方法根据c_id回显开户行和用户
                find();
            })
            // console.log(2)
            //拿到当前登录的用户的u_id
            var u_id = $("#userid").text();
            //通过u_id获取到该用户绑定的所有银行卡
            $.ajax({
                type: "post",
                url: "/BankServlet",  //访问后台去数据库查询select的选项
                dataType: "json",
                data: {
                    action: "findUid", u_id: u_id
                },
                success: function (d) {
                    // console.log(d)
                    if(d.code==1){
                        for(var i=0;i<d.data.length;i++){
                            var a=d.data[i].c_id;
                            var b=a.substring(a.length-4);
                            $("#mySelect").append(" <option value='"+d.data[i].c_id+"'>"+d.data[i].c_account+"("+b+")</option>")
                        }

                    }else {
                        alert(d.msg);
                    }
                },
                error: function () {
                    alert('Error');
                }
            })

            //提交事件
            $("#btn").click(function (){

                var c_id1=$("#mySelect").select().val();    //转出
                var c_id2=$("#c_id").val();                 //转入
                var fmoney=$("#fmoney").val();              //金额
                var code=$("#code").val();                  //验证码


                var reg1 = /^([1-9][0-9]*)+(.[0-9]{1,2})?$/;
                if (c_id2.length!=20){
                    alert("输入账户错误");
                    return;
                }
                // 最多只有两位小数的正则表达式
                if (!reg1.test(fmoney)){
                    alert("输入的值必须是大于零的正数,请重新输入！")
                    return;
                }
                var pwd="";
                //输入框弹窗，获取到支付密码
                var p=prompt("请输入支付密码","");
                if(p!=""&&p!=null){
                    pwd=p;
                }
                if(c_id2==null||c_id2==""){
                    alert("账号不能为空！")
                    return;
                }
                console.log(c_id1);
                console.log(c_id2);
                if(c_id1==c_id2){

                    alert("收付款账号一样")
                    return;
                }
                $.ajax({
                    type: "post",
                    url: "/BankServlet",
                    dataType: "json",
                    data: {
                        action: "transfer",
                        c_id1: c_id1,
                        c_id2:c_id2,
                        fmoney:fmoney,
                        code:code,
                        pwd:pwd
                    },
                    success: function (d) {
                        if(d.code==1){
                           alert(d.msg);
                        }else{
                            alert(d.msg);
                        }
                    },
                    error: function () {
                        alert('Error');
                    }
                })
            })

        })

        function find() {
            var id = $("#c_id").val();
            // alert(id)
            $.ajax({
                url: "/BankServlet",
                type: "post",
                dataType: "json",
                data: {
                    action: "findIdCard", c_id: id
                },
                success: function (d) {
                    // console.log(d)
                    if (d.code == -1) {
                        //银行卡不存在
                        alert(d.msg);
                    } else {
                        $("#u_name").val(d.data.u_name);
                        $("#c_account").val(d.data.c_account);
                    }

                }
            })
        }

    </script>


</head>
<body>
<div id="d1">
    <h1 id="h1">转账</h1>
    <div id="d2">
        <input type="text" name="u_name" id="u_name" placeholder="收款人姓名:" class="i"><br><br><br>
        <input type="text" name="c_id" id="c_id" placeholder="收款人账号:" class="i"><br><br><br>
        <input type="text" name="c_account" id="c_account" placeholder="收款人开户行:" class="i"><br><br><br>
        <select id="mySelect">
            <option value="-1">请选择付款账号：</option>
        </select>
                <br><br><br>
            <input type="text" name="fmoney" id="fmoney" placeholder="转账金额:" class="i"><br><br>
            <input class="txt" type="text" name="code" style="width: 200px;height: 30px" id="code"
                   placeholder="请输入验证码" class="i"/>
            <img id="code_img" alt="" src="http://localhost:8080/kaptcha.jpg"
                 style="position: relative;left: 3px; top: 10px; width: 90px;height: 40px;">

    </div>
    <div id="d3">
        <br><br>
        <input type="button" value="提交" id="btn"
               style="width: 200px;height: 40px;position: absolute;left: 136px;border-radius: 16px;"/>
    </div>

</div>

</body>
</html>